<template>
  <view class="main-container">
    <!-- 1. 原有基础组件（保留你提到的 progress） -->
    <view class="item-obj" @click="navito('progress')">
      <text>3. progress</text>
    </view>

    <!-- 2. 表单组件分组（整理结构，去重 form） -->
    <view class="class-title-item">
      <text class="item-title">3. 表单组件</text>
    </view>
    <view class="item-obj" @click="navito('button')">
      <text>1. button</text>
    </view>
    <view class="item-obj" @click="navito('radio')">
      <text>2. radio</text>
    </view>
    <view class="item-obj" @click="navito('checkbox')">
      <text>3. checkbox</text>
    </view>
    <view class="item-obj" @click="navito('input')">
      <text>4. input</text>
    </view>
    <view class="item-obj" @click="navito('picker')">
      <text>5. picker</text>
    </view>
    <!-- 禁用的表单组件 -->
    <view class="item-obj-disabled">
      <text>6. slider</text>
    </view>
    <view class="item-obj-disabled">
      <text>7. switch</text>
    </view>
    <view class="item-obj-disabled">
      <text>8. textarea</text>
    </view>
    <view class="item-obj" @click="navito('form')">
      <text>9. form</text>
    </view>
    <!-- 新增：简单注册 -->
    <view class="item-obj" @click="navito('register')">
      <text>10. 简单注册</text>
    </view>

    <!-- 3. 其他组件分组（单独整理，避免混乱） -->
    <view class="class-title-item">
      <text class="item-title">4. 其他组件</text>
    </view>
    <view class="item-obj" @click="navito('navigator')">
      <text>1. navigator</text>
    </view>
    <view class="item-obj" @click="navito('image')">
      <text>2. image</text>
    </view>
    <view class="item-obj" @click="navito('video')">
      <text>3. video</text>
    </view>
    <view class="item-obj" @click="navito('map')">
      <text>4. map</text>
    </view>
    <view class="item-obj" @click="navito('campus')">
      <text>5. campus</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    navito(e) {
      let targetUrl = '';
      // 判断是否为 campus，指定特殊路径
      if (e === 'campus') {
        // 路径必须以 / 开头（uni-app 路由规范），对应 pages/homework/campus/campus.vue
        targetUrl = '/pages/homework/campus/campus';
      } else {
        // 其他组件沿用原有路径规则
        targetUrl = `/pages/components/${e}/${e}`;
      }

      // 完整的 uni.navigateTo 跳转逻辑（必须加 uni. 前缀）
      uni.navigateTo({
        url: targetUrl,
        // 可选：跳转失败提示（便于调试）
        fail: (err) => {
          console.error(`跳转${e}失败：`, err);
          uni.showToast({ title: '跳转失败', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
/* 容器样式（补充，避免内容贴边） */
.main-container {
  padding: 15px;
  background-color: #f5f5f5;
}

/* 分组标题样式（补充，提升视觉层级） */
.class-title-item {
  margin: 25px 0 15px;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 可点击菜单项基础样式 */
.item-obj {
  margin-bottom: 20px;
  background-color: #fdfdfd;
  padding: 10px;
  border-radius: 10px;
  transition: background-color 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 轻微阴影，提升质感 */
}

/* 点击时的高亮效果 */
.item-obj:active {
  background-color: #f0f0f0;
}

/* 所有文本统一行高 */
.item-obj text,
.item-obj-disabled text,
.item-title {
  line-height: 20px;
  font-size: 14px;
  color: #333;
}

/* 禁用菜单项样式 */
.item-obj-disabled {
  margin-bottom: 20px;
  background-color: #fdfdfd;
  padding: 10px;
  border-radius: 10px;
  color: #999;
  opacity: 0.6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
</style>